<template>
  <div class="container">
    <el-card class="search-box">
      <el-row :gutter="20">
        <el-form ref="searchForm" :inline="false" label-position="right" label-width="80px" :model="searchForm">
          <el-col :xs="24" :sm="8" :md="8" :lg="8" :xl="8">
            <el-form-item label="表单名称:">
              <el-input v-model.trim="searchForm.formName" clearable />
            </el-form-item>
          </el-col>
        </el-form>
        <el-col :xs="24" :sm="16" :md="16" :lg="16" :xl="16" style="text-align:right">
          <el-button size="small" @click="handleReset('searchForm')">重置</el-button>
          <el-button size="small" type="primary" :loading="searchLoad" @click="handleSearch('searchForm')">查询</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="list-box">
      <div slot="header" class="table_header">
        <span>表单列表</span>
        <div>
          <router-link :to="'/form/add'">
            <el-button size="small" type="primary">新增</el-button>
          </router-link>
          <!-- <el-button size="small" type="default">导出</el-button> -->
          <el-button icon="el-icon-refresh-right" circle @click="handleRefresh" />
        </div>
      </div>
      <div class="list-container">
        <el-table
          :data="tableData"
          border
          show-overflow-tooltip
          stripe
          style="width: 100%"
        >
          <el-table-column
            v-for="(column,index) in columns"
            :key="index"
            :prop="column.prop"
            :label="column.lable"
            show-overflow-tooltip
            :width="column.width || ''"
          >
            <template slot-scope="scope">
              <span> {{ formatter(scope.row,column.prop) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" :width="150" fixed="right">
            <template slot-scope="scope">
              <router-link :to="`/form/edit?id=${scope.row.id}`">
                <el-button type="text" size="small">编辑</el-button>
              </router-link>
              <el-button type="text" size="small" @click="handleDelete(scope)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination
        v-if="totalPages>0"
        :total="totalPages"
        :page.sync="listQuery.pageNumber"
        :limit.sync="listQuery.pageSize"
        :layout="pageLayout"
        @pagination="handlePageClick"
      />
    </el-card>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination'
export default {
  name: 'FormManegerList',
  components: { Pagination },
  data() {
    return {
      searchForm: {
        formName: ''
      },
      searchLoad: false,
      totalPages: 10,
      listQuery: {
        pageNumber: 1,
        pageSize: 10
      },
      pageLayout: 'total, prev, pager, next, jumper',
      tableData: [],
      columns: [
        {
          lable: '名称',
          show: true,
          prop: 'formName',
          width: 200
        },
        {
          lable: '活动类型',
          show: true,
          prop: 'actTypeName'
        },
        {
          lable: '流程',
          show: true,
          prop: 'flowName',
          width: 150
        },
        {
          lable: '关联指标数',
          show: true,
          prop: 'indexSize',
          width: 100
        },
        {
          lable: '更新时间',
          show: true,
          prop: 'updateTime'
        }
      ]
    }
  },
  created() {
    const params = this.getParams()
    this.getLists(params)
  },
  methods: {
    handleReset(formName) {
      this.$refs[formName].resetFields()
    },
    handleSearch(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.listQuery.pageNumber = 1
          const params = this.getParams()
          this.getLists(params)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    getParams() {
      const query = {}
      const { listQuery } = this
      const searchForm = this.searchForm
      for (const i in searchForm) {
        if (searchForm[i]) {
          query[i] = searchForm[i]
        }
      }
      return Object.assign({}, query, listQuery)
    },
    handlePageClick() {
      const params = this.getParams()
      this.getLists(params)
    },
    handleInsert() {

    },
    handleRefresh() {
      const params = this.getParams()
      this.getLists(params)
    },
    formatter(row, prop) {
      const value = row[prop]
      return value
    },
    async getLists(params) {
      if (this.searchLoad) return
      this.searchLoad = true
      try {
        const response = await this.$Http.getFormList(params)
        const { result } = response
        console.log('result', result)
        if (result && result.content) {
          this.tableData = result.content
          this.totalPages = result.totalElements
        }
        this.searchLoad = false
      } catch (err) {
        this.searchLoad = false
      }
    },
    handleEdit({ row, $index }) {

    },
    handleDelete({ row, $index }) {
      const { id } = row
      const { confirmDelete } = this
      const msg = `确定删除这条记录吗？删除后可能无法恢复`
      this.$confirm(msg, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        confirmDelete(id, $index)
      }).catch(() => {

      })
    },
    async confirmDelete(id, index) {
      try {
        const res = await this.$Http.deletionForm(id)
        console.log('res', res)
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: res.message
          })
          const params = this.getParams()
          this.getLists(params)
        } else {
          this.$message({
            type: 'error',
            message: res.message
          })
        }
      } catch (err) {
        this.$message({
          type: 'error',
          message: err
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
    .container{
        padding:10px 10px 0 10px;
        .list-box{
            margin-top:10px;
            .table_header{
                display:flex;
                width: 100%;
                justify-content: space-between;
                align-items: center;
            }
        }
    }
</style>

